<template>
  <div class="login-container">
    <div class="language-switch">
      <a-dropdown>
        <a class="language-switch-trigger" @click.prevent>
          {{ currentLanguage }}
          <down-outlined />
        </a>
        <template #overlay>
          <a-menu @click="handleLanguageChange">
            <a-menu-item key="zh-CN">中文</a-menu-item>
            <a-menu-item key="en-US">English</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div class="login-form">
      <h2 class="title">{{ t('login.title') }}</h2>
      <a-form
        :model="formState"
        name="login"
        @finish="handleSubmit"
        autocomplete="off"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: t('login.usernameRequired') }]"
        >
          <a-input
            v-model:value="formState.username"
            :placeholder="t('login.username')"
            size="large"
          >
            <template #prefix>
              <user-outlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: t('login.passwordRequired') }]"
        >
          <a-input-password
            v-model:value="formState.password"
            :placeholder="t('login.password')"
            size="large"
          >
            <template #prefix>
              <lock-outlined />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-checkbox v-model:checked="formState.remember">{{ t('login.rememberMe') }}</a-checkbox>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            :loading="loading"
            block
            size="large"
          >
            {{ t('login.login') }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined, DownOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores/user'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const { t, locale } = useI18n()
const loading = ref(false)

const currentLanguage = computed(() => {
  return locale.value === 'zh-CN' ? '中文' : 'English'
})

const handleLanguageChange = ({ key }: { key: string }) => {
  locale.value = key
  // 保存语言选择到 localStorage
  localStorage.setItem('language', key)
}

// 初始化语言设置
const savedLanguage = localStorage.getItem('language')
if (savedLanguage) {
  locale.value = savedLanguage
}

const formState = reactive({
  username: '',
  password: '',
  remember: false
})

// 从localStorage获取保存的用户名和密码
const savedUsername = localStorage.getItem('username')
const savedPassword = localStorage.getItem('password')
if (savedUsername && savedPassword) {
  formState.username = savedUsername
  formState.password = savedPassword
  formState.remember = true
}

const handleSubmit = async () => {
  loading.value = true
  try {
    const success = await userStore.login(formState.username, formState.password)
    console.log("success", success)
    if (success) {
      // 如果选择记住密码，保存到localStorage
      if (formState.remember) {
        localStorage.setItem('username', formState.username)
        localStorage.setItem('password', formState.password)
      } else {
        localStorage.removeItem('username')
        localStorage.removeItem('password')
      }
      
      message.success(t('login.success'))
      // 获取重定向地址或默认跳转到首页
      const redirect = route.query.redirect as string
      await router.replace(redirect || '/')
    }
  } catch (error: any) {
    message.error(error.message || t('login.invalidCredentials'))
  } finally {
    loading.value = false
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/variables.less';

.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: @background-color-base;
  position: relative;

  .language-switch {
    position: absolute;
    top: 20px;
    right: 20px;

    .language-switch-trigger {
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer;
      padding: 8px 12px;
      border-radius: @border-radius-base;
      background-color: rgba(255, 255, 255, 0.8);
      
      &:hover {
        color: @primary-color;
        background-color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  .login-form {
    width: 400px;
    padding: @spacing-lg * 2;
    background-color: #fff;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-light;

    .title {
      text-align: center;
      margin-bottom: @spacing-lg * 2;
      color: @heading-color;
      font-size: 24px;
    }
  }
}
</style> 